body {
    --window-control-size: 14px;
}

@property --custom-window-controls {
    syntax: 'off | on';
    inherits: false;
    initial-value: on;
}

@container body style(--custom-window-controls: on) {
    .winButtons_c38106 {
        gap: 0;
        padding-right: calc(var(--gap) - (var(--window-control-size) / 2) + 1px);
    }
    .winButtons_c38106::before {
        margin-right: calc(var(--custom-app-top-bar-height) / 4);
    }
    .winButton_c38106 > svg {
        display: none;
    }
    .winButton_c38106 {
        background: none !important;
        width: calc(var(--window-control-size) * 2);
        height: var(--custom-app-top-bar-height);
    }
    .winButton_c38106::after {
        display: block;
        content: '';
        height: var(--window-control-size);
        width: var(--window-control-size);
        border-radius: 50%;
    }
    .winButton_c38106:hover::after {
        filter: brightness(0.7);
    }
    .winButton_c38106:active::after {
        transform: scale(0.9);
    }
    .winButtonClose_c38106::after {
        background-color: var(--dnd) !important;
    }
    .winButtonMinMax_c38106:nth-child(1)::after {
        background-color: var(--idle) !important;
    }
    .winButtonMinMax_c38106:nth-child(2)::after {
        background-color: var(--online) !important;
    }
}

@container body style(--custom-window-controls: off) and style(--top-bar-button-position: titlebar) {
    .visual-refresh {
        .winButton_c38106 {
            width: calc(var(--window-control-size) * 2);
            height: calc(var(--window-control-size) * 2);
        }
        .winButtons_c38106 {
            gap: 0;
        }
    }
}
